<template>
  <div class="header">
    <div v-if="aiUserInfo" class="header-main" @click="intimacyVisible = true">
      <div class="photo">
        <van-image :src="handleImagShow(aiUserInfo.photo)" class="image" />
        <div class="circle-main" v-if="scheduleTotal > 0">
          <div class="circle-bar-left" :style="{ transform: `rotate(${leftDeg}deg)` }"></div>
          <div class="circle-bar-right" :class="{ 'circle-bar-left-top': scheduleTotal > 50 }" :style="{ transform: `rotate(${rightDeg}deg)` }"></div>
          <div class="mask"></div>
        </div>
        <div class="circle-num">
          <div class="icon"></div>
          <div class="num">{{ scheduleTotal }}</div>
        </div>
      </div>
      <div class="nickName">{{ aiUserInfo?.nickname }}</div>
      <div class="icon-right"></div>
    </div>
    <IntimacyTips :intimacyVisible="intimacyVisible" @close="closeVisible" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { AiUserInfo } from '../../types'
import { handleImagShow } from '../../helpers'
import IntimacyTips from '../intimacy-tips/index.vue'
const props = defineProps<{ aiUserInfo?: AiUserInfo; scheduleTotal: number }>()
// 计算半圆的展示
const leftDeg = computed(() => {
  if (props.scheduleTotal === 0) return 0
  if (props.scheduleTotal <= 50) return 0
  return ((props.scheduleTotal - 50) / 50) * 176
})
// 计算半圆的展示
const rightDeg = computed(() => {
  if (props.scheduleTotal === 0) return 0
  if (props.scheduleTotal >= 50) return 0
  return (props.scheduleTotal / 50) * 180
})
//弹框
const intimacyVisible = ref<boolean>(false)

//关闭弹框
const closeVisible = () => {
  intimacyVisible.value = false
}
</script>

<style lang="scss" scoped>
.header {
  height: 44px;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.667px;
  background-color: #fff;
  z-index: 2;
  .header-main {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 5px;
    .circle-main {
      position: absolute;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background-image: linear-gradient(254.69deg, #ffd600 -6.33%, #fd8795 48.09%, #cc00ff 102.01%);
      .circle-bar-left {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background-color: #e9ecef;
        width: 38.1px;
        height: 38.1px;
        clip: rect(0, 19px, auto, 0);
        border-radius: 50%;
      }
      .circle-bar-right {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background-color: #e9ecef;
        width: 38.1px;
        height: 38.1px;
        clip: rect(0, auto, auto, 19px);
        border-radius: 50%;
        &.circle-bar-left-top {
          background-image: linear-gradient(254.69deg, #ffd600 -6.33%, #fd8795 48.09%, #cc00ff 102.01%);
        }
      }
      .mask {
        width: 34px;
        height: 34px;
        background-color: #fff;
        text-align: center;
        position: absolute;
        top: 2px;
        left: 2px;
        border-radius: 50%;
      }
    }
    .circle-num {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      height: 11px;
      width: 24px;
      left: 7px;
      top: -2px;
      border-radius: 4px;
      z-index: 3;
      background-image: linear-gradient(254.69deg, #ffd600 -6.33%, #fd8795 48.09%, #cc00ff 102.01%);
      .num {
        font-size: 8px;
        -webkit-text-size-adjust: none;
        color: #fff;
        line-height: normal;
      }
      .icon {
        height: 6.5px;
        width: 6.5px;
        background: url('@/assets/images/love-icon.png') no-repeat center;
        background-size: cover;
      }
    }
    .image {
      width: 32px;
      height: 32px;
      overflow: hidden;
      border-radius: 50%;
      flex-shrink: 0;
      z-index: 2;
    }
  }
  .nickName {
    font-family: SF Pro;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
  }
  .icon-right {
    width: 12px;
    height: 12px;
    background: url('@/assets/images/triangle.png') no-repeat center;
    background-size: cover;
    margin-left: 4px;
  }
}
</style>
